<template>
    <div class="indexFour">
      <h2>
        <i class="iconfont icon-huo middle"></i>
        <i class="iconfont icon-huo "></i>
        <i class="iconfont icon-huo "></i> 圣诞狂欢
        <i class="iconfont icon-huo "></i>
        <i class="iconfont icon-huo middle"></i>
        <i class="iconfont icon-huo mini"></i>
      </h2>
      <div
     
        @click="
          $router.push({
            path: '/christmas',
          })
        "
      >
        <img
          src="http://www.higuang365.com/public/images/common/activity/christmas/bgm.jpg"
          alt=""
        />
      </div>
    </div>
  </template>
  <script lang="ts">

  import { defineComponent } from "vue";
  export default defineComponent({
    setup() {
      return { };
    },
  });
  </script>
  <style lang="scss" scoped>
  .indexFour {
    h2 {
      font-size: 1.8rem;
      padding: 0.5rem;
      margin: 0;
      border-bottom: 2px solid #f7f7f7;
      position: relative;
      text-align: center;
      i {
        color: red;
      }
      .icon-huo {
        font-size: 2rem;
      }
      .mini {
        font-size: 1.4rem;
      }
      .middle {
        font-size: 1.7rem;
      }
      .more {
        font-size: 1rem;
        position: absolute;
        top: 1rem;
        right: 0;
        font-weight: 500;
        color: #f15e5e;
      }
    }
 }
  </style>
  